import React from 'react';
import { css } from 'emotion';
import defaultExercises from '../../../statics/defaultExercises';
import MultiCheckBox from './MultiCheckBox';
import {context} from '../../../context';

const ExerciseBox = ({node}) => {
    
    //  const checked = defaultExercises.map(() => {
    //     return false;
    // });

    // return (<div className={wrapper}>
    //     <MultiCheckBox node={node} exercises={defaultExercises} ></MultiCheckBox>
    // </div>);
    return (
        <MultiCheckBox node={node} exercises={defaultExercises} ></MultiCheckBox>
    );
};

export default ExerciseBox;

// CSS
const wrapper = css`
display: flex;
position: absolute;
bottom: calc(100% + 5px);
left:0;
background-color: #ffffff;
width: max-content;
height: 50px;
padding: 0 8px;
font-size: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 5px 5px 10px #aaaaaa;
`;